<template>
  <view class="container">
    <view class="news-content" v-if="newsDetail">
      <rich-text :nodes="newsDetail"></rich-text>
      <view v-if="source" class="source-link" @click="openSource">
        <text>查看原文</text>
      </view>
    </view>
    <view v-else class="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { getNewsDetail } from '@/api/news'

export default {
  data() {
    return {
      newsDetail: '',
      newsId: '',
      source: ''
    }
  },
  onLoad(options) {
    if (options.id) {
      this.newsId = options.id
      this.getNewsDetail()
    }
  },
  methods: {
    openSource() {
      if (this.source) {
        // #ifdef H5
        window.open(this.source)
        // #endif
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.source)
        // #endif
      }
    },
    async getNewsDetail() {
      try {
        const res = await getNewsDetail(this.newsId)
        if (res.code === 200) {
          this.newsDetail = res.data.content
          this.source = res.data.source
        }
      } catch (error) {
        console.error('获取新闻详情失败:', error)
        uni.showToast({
          title: '获取新闻详情失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #fff;
  min-height: 100vh;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
}

.news-content {
  font-size: 28rpx;
  line-height: 1.6;
  position: relative;
  
  :deep(img) {
    max-width: 100%;
    height: auto;
  }
  
  :deep(p) {
    margin: 20rpx 0;
  }
}

.source-link {
  margin-top: 30rpx;
  padding: 20rpx;
  text-align: center;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  
  text {
    color: #2979ff;
    font-size: 28rpx;
  }
}
</style>